<script setup lang="ts">
import { reactive } from 'vue'

// 数据概览信息
const overviewData = reactive({
  totalUsers: {
    count: '24,156',
    growth: '+15%',
    icon: 'fas fa-users'
  },
  totalProjects: {
    count: '4,872',
    growth: '+12%',
    icon: 'fas fa-project-diagram'
  },
  totalPlugins: {
    count: '342',
    growth: '+8%',
    icon: 'fas fa-puzzle-piece'
  },
  totalDownloads: {
    count: '87,429',
    growth: '+23%',
    icon: 'fas fa-download'
  }
})
</script>

<template>
  <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
    <!-- 总用户数 -->
    <div class="rounded-lg border border-gray-200 bg-white p-5">
      <div class="flex items-center justify-between mb-4">
        <h3 class="text-sm font-medium text-gray-600">总用户数</h3>
        <div class="w-10 h-10 rounded-full flex items-center justify-center bg-amber-100">
          <i class="fas fa-users text-amber-500 text-lg"></i>
        </div>
      </div>
      <p class="text-2xl font-bold text-gray-800">{{ overviewData.totalUsers.count }}</p>
      <div class="mt-2 flex items-center">
        <span class="text-sm text-green-500 mr-2"><i class="fas fa-arrow-up mr-1"></i>{{ overviewData.totalUsers.growth }}</span>
        <span class="text-xs text-gray-500">较上月</span>
      </div>
    </div>
    
    <!-- 总工程数 -->
    <div class="rounded-lg border border-gray-200 bg-white p-5">
      <div class="flex items-center justify-between mb-4">
        <h3 class="text-sm font-medium text-gray-600">总工程数</h3>
        <div class="w-10 h-10 rounded-full flex items-center justify-center bg-amber-100">
          <i class="fas fa-project-diagram text-amber-500 text-lg"></i>
        </div>
      </div>
      <p class="text-2xl font-bold text-gray-800">{{ overviewData.totalProjects.count }}</p>
      <div class="mt-2 flex items-center">
        <span class="text-sm text-green-500 mr-2"><i class="fas fa-arrow-up mr-1"></i>{{ overviewData.totalProjects.growth }}</span>
        <span class="text-xs text-gray-500">较上月</span>
      </div>
    </div>
    
    <!-- 总插件数 -->
    <div class="rounded-lg border border-gray-200 bg-white p-5">
      <div class="flex items-center justify-between mb-4">
        <h3 class="text-sm font-medium text-gray-600">总插件数</h3>
        <div class="w-10 h-10 rounded-full flex items-center justify-center bg-amber-100">
          <i class="fas fa-puzzle-piece text-amber-500 text-lg"></i>
        </div>
      </div>
      <p class="text-2xl font-bold text-gray-800">{{ overviewData.totalPlugins.count }}</p>
      <div class="mt-2 flex items-center">
        <span class="text-sm text-green-500 mr-2"><i class="fas fa-arrow-up mr-1"></i>{{ overviewData.totalPlugins.growth }}</span>
        <span class="text-xs text-gray-500">较上月</span>
      </div>
    </div>
    
    <!-- 总下载量 -->
    <div class="rounded-lg border border-gray-200 bg-white p-5">
      <div class="flex items-center justify-between mb-4">
        <h3 class="text-sm font-medium text-gray-600">总下载量</h3>
        <div class="w-10 h-10 rounded-full flex items-center justify-center bg-amber-100">
          <i class="fas fa-download text-amber-500 text-lg"></i>
        </div>
      </div>
      <p class="text-2xl font-bold text-gray-800">{{ overviewData.totalDownloads.count }}</p>
      <div class="mt-2 flex items-center">
        <span class="text-sm text-green-500 mr-2"><i class="fas fa-arrow-up mr-1"></i>{{ overviewData.totalDownloads.growth }}</span>
        <span class="text-xs text-gray-500">较上月</span>
      </div>
    </div>
  </div>
</template>

<style scoped>
.text-amber-500 {
  color: #f59e0b;
}
.bg-amber-100 {
  background-color: #fef3c7;
}
</style> 